<template>
  <div>
    <div>新增员工</div>
    <div>
      <el-form
        ref="employee"
        :model="employee"
        :rules="rules"
        label-width="80px"
        style="width: 500px"
      >
        <el-form-item label="员工姓名" prop="ename">
          <el-input v-model="employee.ename"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="employee.gender">
            <el-radio label="true">男</el-radio>
            <el-radio label="false">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="性别str">
          <el-radio-group v-model="employee.genderstr">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="employee.birthdate"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="employee.email"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select
            v-model="employee.department.did"
            clearable
            placeholder="请选择部门"
          >
            <el-option
              v-for="item in departments"
              :key="item.did"
              :label="item.dname"
              :value="item.did"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addEmployee('employee')"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      if (typeof value == "undefined" || value == "") {
        callback(new Error("邮箱名不能为空"));
      } else if (!/^\w+@\w+\.\w+$/.test(value)) {
        callback(new Error("邮箱格式错误"));
      }else{
        //验证邮箱是否被注册，发送异步请求，让服务器查询结果
        this.$axios
        .get("http://localhost:8080/employee/email/"+value)
        .then((resp) => {
            if(resp.data.data){
              callback(new Error("邮箱已被注册"));
            }else{
              callback();
            }
        });
      }
    };
    return {
      employee: {
        department: { did: null },
      },
      departments: [],
      rules: {
        // ename: [
        //   { required: true, message: "请输入活动名称", trigger: "blur" },
        //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        // ],
        // // email: [
        // //   { required: true, message: "请输入邮箱", trigger: "blur" },
        // //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        // // ],
        // email: [{ validator: checkEmail, trigger: "blur" }],
      },
    };
  },
  created() {
    this.getAllDepartments();
  },
  methods: {
    //查询所有部门
    getAllDepartments() {
      this.$axios
        .get("http://localhost:8080/department/get/all")
        .then((resp) => (this.departments = resp.data.data));
    },
    addEmployee(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          console.log("提交数据：" + JSON.stringify(this.employee));
          this.$axios
            .post("http://localhost:8080/employee/add", this.employee)
            .then((resp) => {
              if(resp.data.code==200){
                this.$message("添加成功");
              }else if(resp.data.code==100){
                this.$message("验证失败:"+JSON.stringify(resp.data.data));
              }else if(resp.data.code==500){
                this.$message(JSON.stringify(resp.data.data));
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>